<template>
  <div class="app-container">
    <!-- 左侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="logo-container">
          <el-icon :size="28" class="logo"><ChatDotRound /></el-icon>
          <span class="logo-text">DeepSeek</span>
        </div>
        <el-button type="primary" class="new-chat-btn" @click="createNewChat">
          <el-icon><Plus /></el-icon> 开始新对话
        </el-button>
      </div>
      
      <div class="sidebar-menu">
        <div class="menu-section">
          <div class="menu-title">会话列表</div>
          <div 
            v-for="chat in historyChats" 
            :key="chat.id" 
            :class="['menu-item', chat.active ? 'active' : '']"
          >
            <div class="menu-item-content" @click="switchChat(chat.id)">
              <el-icon><ChatDotRound /></el-icon>
              <span class="menu-item-text">{{ chat.title }}</span>
            </div>
            <div class="menu-item-actions">
              <el-button type="text" @click.stop="deleteChat(chat.id, $event)" size="small">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 聊天头部 -->
      <div class="chat-header">
        <div class="chat-title">
          <span class="title-text">DeepSeek AI 助手</span>
          <el-tag size="small" type="info" effect="plain">DeepSeek</el-tag>
        </div>
        <div class="header-actions">
          <el-tooltip content="清空对话" placement="bottom">
            <el-button circle size="small" @click="clearChat">
              <el-icon><Delete /></el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
      
      <!-- 聊天区域 -->
      <div class="chat-body">
        <div class="chat-messages" ref="messagesContainer">
          <!-- 欢迎信息 -->
          <div v-if="messages.length === 0" class="welcome-container">
            <div class="welcome-header">
              <h1 class="welcome-title">我是 DeepSeek，很高兴见到你!</h1>
              <p class="welcome-subtitle">我可以帮你解答问题、读写文本、写作各种创意内容，请随时向我提问～</p>
            </div>
            
            <div class="quick-actions">
              <div class="quick-actions-title">快速开始</div>
              <div class="quick-actions-list">
                <div class="quick-action-item" 
                    v-for="(action, index) in quickActions" 
                    :key="index" 
                    @click="handleQuickAction(action)">
                  <el-icon><ArrowRight /></el-icon>
                  <span>{{ action }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 聊天消息 -->
          <div v-for="(message, index) in messages" :key="index" 
               :class="['message-container', message.role === 'user' ? 'user-message' : 'ai-message']">
            <!-- AI头像区域 - 只在AI消息时显示 -->
            <div v-if="message.role === 'assistant'" class="message-avatar ai-avatar-container">
              <el-avatar :size="36" class="ai-avatar">
                <el-icon><ChatDotRound /></el-icon>
              </el-avatar>
            </div>
            
            <!-- 消息内容 -->
            <div class="message-content">
              <div class="message-body">
                <div v-if="message.role === 'user'">{{ message.content }}</div>
                <div v-else class="markdown-content" v-html="formatMarkdown(message.content)"></div>
              </div>
              <div v-if="message.role === 'assistant'" class="message-actions">
                <el-button size="small" type="text" @click="copyToClipboard(message.content)">
                  <el-icon><DocumentCopy /></el-icon> 复制
                </el-button>
              </div>
            </div>
            
            <!-- 用户头像区域 - 只在用户消息时显示 -->
            <div v-if="message.role === 'user'" class="message-avatar user-avatar-container">
              <el-avatar :size="36" class="user-avatar">
                <el-icon><User /></el-icon>
              </el-avatar>
            </div>
          </div>
          
          <!-- 加载状态 -->
          <div v-if="isLoading" class="message-container ai-message">
            <div class="message-avatar">
              <el-avatar :size="36" class="ai-avatar">
                <el-icon><ChatDotRound /></el-icon>
              </el-avatar>
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="message-sender">DeepSeek AI</span>
                <span class="message-time">{{ formatTime() }}</span>
              </div>
              <div class="message-body">
                <div class="typing-indicator">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 聊天输入框 -->
      <div class="chat-footer">
        <div class="input-container">
          <el-input
            v-model="userInput"
            type="textarea"
            :rows="2"
            :placeholder="isLoading ? '请等待AI回复完成...' : '输入问题或指令...' "
            resize="none"
            @keydown.enter.exact.prevent="sendMessage"
            @keydown.ctrl.enter="handleCtrlEnter"
            :disabled="isLoading"
            class="message-input"
          />
          <div class="input-actions">
            <el-button 
              type="primary" 
              circle
              :disabled="isLoading || !userInput.trim()" 
              @click="sendMessage"
              class="send-button"
            >
              <el-icon v-if="!isLoading"><Position /></el-icon>
              <el-icon v-else class="is-loading"><Loading /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="footer-tips">
          <span>提示: 按Enter发送，Ctrl+Enter换行</span>
          <span>ID: {{ memoryId }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { sendMessageStream, getHistoryChat } from '@/api/chat'
import { useUserStore } from '@/store/user'
import { 
  ChatDotRound, 
  Delete, 
  Position, 
  ArrowRight,
  DocumentCopy, 
  EditPen,
  Plus,
  SetUp,
  Document,
  Monitor,
  Connection,
  Paperclip,
  Loading,
  User
} from '@element-plus/icons-vue'

const userStore = useUserStore()
const messagesContainer = ref(null)
const messages = ref([])
const userInput = ref('')
const isLoading = ref(false)
const memoryId = ref(new Date().getTime()) // 生成唯一的对话ID

// 快速操作选项
const quickActions = [
  '介绍一下自己',
  '给我讲个故事',
  '帮我写一篇关于大学生活的短文',
  '最近热门的学术研究方向有哪些?'
]

// 历史对话 - 从localStorage读取或使用默认空数组
const historyChats = ref(JSON.parse(localStorage.getItem('historyChats') || '[]'))

// 如果没有任何对话，创建一个空的新对话
if (historyChats.value.length === 0) {
  const newChatId = new Date().getTime()
  historyChats.value.push({
    id: newChatId,
    title: '新对话',
    active: true,
    memoryId: newChatId
  })
}

// 监听historyChats变化，保存到localStorage
watch(historyChats.value, () => {
  localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
}, { deep: true })

// 激活的对话ID
const activeChat = ref(historyChats.value.find(chat => chat.active)?.id || historyChats.value[0].id)

// 切换对话
const switchChat = (chatId) => {
  activeChat.value = chatId
  // 在实际应用中，这里应该加载对应的聊天历史
  // 这里模拟清空当前对话并加载新对话
  messages.value = []
  
  // 更新历史对话的激活状态
  historyChats.value.forEach(chat => {
    chat.active = chat.id === chatId
    // 如果是当前选中的对话，使用其memoryId
    if (chat.active) {
      memoryId.value = chat.memoryId
    }
  })
  
  // 保存到localStorage
  localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
  
  ElMessage.success(`已切换到：${historyChats.value.find(c => c.id === chatId)?.title || '新对话'}`)
}

// 新建对话
const createNewChat = () => {
  messages.value = []
  
  // 将所有对话设为非活跃
  historyChats.value.forEach(chat => {
    chat.active = false
  })
  
  // 创建新对话并添加到列表
  const newChatId = new Date().getTime()
  historyChats.value.push({
    id: newChatId,
    title: '新对话',
    active: true,
    memoryId: newChatId
  })
  
  // 更新当前活跃对话ID和memoryId
  activeChat.value = newChatId
  memoryId.value = newChatId
  
  // 保存到localStorage
  localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
  
  ElMessage.success('已创建新对话')
}

// 删除对话
const deleteChat = (chatId, event) => {
  event.stopPropagation() // 阻止事件冒泡
  
  ElMessageBox.confirm('确定要删除这个对话吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 如果当前只有一个对话，则创建新的对话
    if (historyChats.value.length === 1) {
      createNewChat()
      historyChats.value = historyChats.value.filter(chat => chat.id !== chatId)
    } else {
      // 如果删除的是当前活跃对话
      const isActiveChat = historyChats.value.find(chat => chat.id === chatId)?.active
      
      // 先从列表中移除
      historyChats.value = historyChats.value.filter(chat => chat.id !== chatId)
      
      // 如果删除的是当前活跃对话，则激活第一个对话
      if (isActiveChat && historyChats.value.length > 0) {
        historyChats.value[0].active = true
        activeChat.value = historyChats.value[0].id
        memoryId.value = historyChats.value[0].memoryId
        
        // 清空当前消息并加载新对话内容
        messages.value = []
      }
    }
    
    // 保存到localStorage
    localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
    
    ElMessage.success('对话已删除')
  }).catch(() => {
    // 取消删除
  })
}

// 清空当前对话
const clearChat = () => {
  ElMessageBox.confirm('确定要清空当前对话吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    messages.value = []
    ElMessage.success('对话已清空')
  }).catch(() => {
    // 取消清空
  })
}

// 发送消息
const sendMessage = async () => {
  // 如果正在加载或输入为空，不发送
  if (isLoading.value || !userInput.value.trim()) {
    return
  }
  
  // 检查用户是否已登录
  if (!userStore.token) {
    ElMessage.warning('请先登录后再与AI对话')
    return
  }
  
  // 添加用户消息到消息列表
  const userMessage = {
    role: 'user',
    content: userInput.value.trim(),
    time: new Date().getTime()
  }
  messages.value.push(userMessage)
  
  // 初始化AI回复
  const aiMessage = {
    role: 'assistant',
    content: '',
    time: new Date().getTime()
  }
  
  // 清空输入框并设置加载状态
  const input = userInput.value.trim()
  userInput.value = ''
  isLoading.value = true // 设置加载状态
  
  // 滚动到底部
  await nextTick()
  scrollToBottom()
  
  try {
    // 如果是第一条消息，更新对话标题
    if (messages.value.length === 1) {
      updateChatTitle(input)
    }
    
    // 添加AI消息到列表
    messages.value.push(aiMessage)
    
    // 模拟打字效果的函数
    const simulateTyping = (text, callback) => {
      let index = 0;
      const timer = setInterval(() => {
        if (index < text.length) {
          callback(text.charAt(index));
          index++;
        } else {
          clearInterval(timer);
        }
      }, 50);
    };

    // 根据输入生成模拟回复
    const generateSimulatedResponse = (input) => {
      const responses = {
        '介绍一下自己': '我是DeepSeek AI助手，由HyperBoost团队集成。我可以帮助你回答问题、提供信息和解决各种学习、工作中的问题。我的能力包括理解上下文、生成文本内容、解答问题等。有什么我可以帮助你的吗？',
        '给我讲个故事': '从前，有一个大学生叫小明，他一直梦想创业做一款帮助学生提高效率的软件。他在大学里学习编程，日以继夜地练习代码。虽然经历了很多失败，但他从未放弃。最终，他开发出了一款名为"HyperBoost"的应用，帮助无数学生提高了学习效率，实现了自己的梦想。',
        '帮我写一篇关于大学生活的短文': '# 大学时光：成长与蜕变\n\n大学生活如同一场精彩的冒险，充满了挑战与机遇。从踏入校园的那一刻起，我们便开始了一段自我探索与成长的旅程。\n\n课堂上，我们汲取知识的养分；图书馆里，我们沉浸在书海的宁静；社团活动中，我们展现才华与激情；宿舍生活里，我们学会了包容与分享。\n\n大学不仅教会我们专业知识，更培养了我们独立思考的能力。我们学会了时间管理，学会了处理人际关系，学会了面对挫折与失败。\n\n这四年，是我们人生中最宝贵的财富。它塑造了我们的价值观，拓展了我们的视野，为我们未来的道路奠定了坚实的基础。\n\n愿每一个大学生都能珍惜这段时光，在挑战中成长，在探索中蜕变，书写属于自己的精彩篇章。',
        '最近热门的学术研究方向有哪些?': '最近热门的学术研究方向包括：\n\n1. **人工智能与机器学习**：深度学习、强化学习、联邦学习等领域持续发展。\n\n2. **气候变化与可持续发展**：研究减缓全球变暖的技术与策略。\n\n3. **量子计算**：在算法、材料科学、密码学等方面的应用研究。\n\n4. **生物技术与医疗信息学**：基因编辑、个性化医疗、生物数据分析等方向。\n\n5. **网络安全**：随着数字化程度加深，网络安全研究变得更为重要。\n\n6. **人机交互与VR/AR技术**：探索更自然、高效的人机交互模式。\n\n7. **新能源技术**：太阳能、氢能源等清洁能源研究。\n\n8. **材料科学**：超导材料、二维材料等新型材料的发现与应用。\n\n大学生可以选择这些领域进行深入研究，参与创新。'
      };
      
      // 尝试找到匹配的预设回复
      for (const key in responses) {
        if (input.includes(key)) {
          return responses[key];
        }
      }
      
      // 默认回复
      return `感谢您的提问："${input}"。作为HyperBoost平台的AI助手，我很乐意帮助解答您的问题。请注意，我目前是在演示模式下运行，连接到真实DeepSeek API时，我将能够提供更加丰富和定制化的回答。您有什么其他问题或需要帮助的地方吗？`;
    };
    
    // 设置请求超时处理
    let requestTimedOut = false;
    const requestTimeout = setTimeout(() => {
      requestTimedOut = true;
      console.log('手动处理请求超时，启用模拟回复');
      
      // 检查AI消息内容，如果已有内容则保留
      if (aiMessage.content.trim().length > 0) {
        console.log('已收到部分响应，使用已接收内容');
        isLoading.value = false;
        return;
      }
      
      // API请求超时，使用模拟回复
      const simulatedResponse = generateSimulatedResponse(input);
      simulateTyping(simulatedResponse, (char) => {
        aiMessage.content += char;
        scrollToBottom();
      });
      
      // 模拟结束后设置状态
      setTimeout(() => {
        isLoading.value = false;
      }, simulatedResponse.length * 50 + 1000);
      
    }, 30000); // 将超时时间延长到30秒
    
    try {
      // 尝试使用API
      sendMessageStream(
        { 
          message: input,
          memoryId: memoryId.value
        }, 
        (chunk) => {
          // 如果已经启用了模拟回复，不处理API返回的内容
          if (requestTimedOut) return;
          
          try {
            // 实时更新AI回复内容
            if (chunk && typeof chunk === 'string') {
              aiMessage.content += chunk;
              // 每次接收内容都滚动到底部
              nextTick(() => {
                scrollToBottom();
              });
            } else {
              console.warn('接收到非字符串类型的响应块:', chunk);
            }
          } catch (err) {
            console.warn('处理响应块时出错:', err);
          }
        }
      ).then((result) => {
        clearTimeout(requestTimeout); // 清除超时处理
        if (!requestTimedOut) { // 如果没有启用模拟回复
          console.log('聊天请求完成，总响应长度:', result ? result.length : 0);
          isLoading.value = false;
        }
      }).catch(error => {
        clearTimeout(requestTimeout); // 清除超时处理
        
        // 检查响应是否有内容，如果已有内容则不使用模拟回复
        if (!requestTimedOut && aiMessage.content.trim().length > 0) {
          console.warn('API调用遇到错误，但已收到部分响应，使用已接收内容', error);
          isLoading.value = false;
          return;
        }
          
        if (!requestTimedOut) { // 如果没有启用模拟回复也没有收到任何内容
          console.error('API调用失败，使用模拟回复', error);
          
          // API调用失败，使用模拟回复
          const simulatedResponse = generateSimulatedResponse(input);
          simulateTyping(simulatedResponse, (char) => {
            aiMessage.content += char;
            scrollToBottom();
          });
          
          // 模拟结束后设置状态
          setTimeout(() => {
            isLoading.value = false;
          }, simulatedResponse.length * 50 + 1000);
        }
      });
    } catch (error) {
      clearTimeout(requestTimeout); // 清除超时处理
      if (!requestTimedOut) { // 如果没有启用模拟回复
        console.error('发送消息失败，使用模拟回复', error);
        
        // 直接使用模拟回复
        const simulatedResponse = generateSimulatedResponse(input);
        simulateTyping(simulatedResponse, (char) => {
          aiMessage.content += char;
          scrollToBottom();
        });
        
        // 模拟结束后设置状态
        setTimeout(() => {
          isLoading.value = false;
        }, simulatedResponse.length * 50 + 1000);
      }
    }
  } catch (error) {
    console.error('发送消息错误:', error);
    ElMessage.error('发送消息失败，请稍后重试');
    isLoading.value = false;
  }
}

// 处理快捷操作选择
const handleQuickAction = (action) => {
  userInput.value = action
  sendMessage()
}

// 处理Ctrl+Enter
const handleCtrlEnter = () => {
  userInput.value += '\n'
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    nextTick(() => {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    })
  }
}

// 更新对话标题
const updateChatTitle = (userMessage) => {
  // 获取当前活跃对话
  const currentChat = historyChats.value.find(chat => chat.active)
  if (currentChat) {
    // 从用户输入中提取前15个字符作为标题
    const title = userMessage.length > 15 ? userMessage.substring(0, 15) + '...' : userMessage
    currentChat.title = title
    
    // 保存到localStorage
    localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
  }
}

// 格式化时间
const formatTime = (timestamp = Date.now()) => {
  const date = new Date(timestamp)
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

// 格式化Markdown
const formatMarkdown = (text) => {
  if (!text) return '';
  
  // 简单的Markdown解析
  return text
    // 处理标题
    .replace(/^# (.*?)$/gm, '<h1>$1</h1>')
    .replace(/^## (.*?)$/gm, '<h2>$1</h2>')
    .replace(/^### (.*?)$/gm, '<h3>$1</h3>')
    
    // 处理粗体和斜体
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    
    // 处理列表
    .replace(/^\- (.*?)$/gm, '<li>$1</li>')
    .replace(/^\d+\. (.*?)$/gm, '<li>$1</li>')
    
    // 处理链接
    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>')
    
    // 处理代码块
    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
    .replace(/`(.*?)`/g, '<code>$1</code>')
    
    // 处理换行
    .replace(/\n/g, '<br>');
}

// 复制到剪贴板
const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

// 初始化时滚动到底部
onMounted(() => {
  scrollToBottom()
})
</script>

<style scoped>
.app-container {
  display: flex;
  height: calc(100vh - 64px);
  background-color: #f5f7fa;
}

/* 左侧边栏样式 */
.sidebar {
  width: 260px;
  background-color: #001529;
  color: white;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #2c3e50;
  overflow-y: auto;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #2c3e50;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.logo {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
}

.new-chat-btn {
  width: 100%;
}

.sidebar-menu {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.menu-section {
  margin-bottom: 24px;
}

.menu-title {
  font-size: 12px;
  text-transform: uppercase;
  color: #8899a6;
  margin-bottom: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: #1e2d3d;
}

.menu-item.active {
  background-color: #1890ff;
}

.menu-item-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.menu-item-text {
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item-actions {
  opacity: 0;
  transition: opacity 0.3s;
}

.menu-item:hover .menu-item-actions {
  opacity: 1;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: 16px;
  border-bottom: 1px solid #eaecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.chat-title {
  display: flex;
  align-items: center;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  margin-right: 12px;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #f5f7fa;
}

.chat-messages {
  height: 100%;
  overflow-y: auto;
}

/* 消息样式 */
.message-container {
  display: flex;
  margin-bottom: 24px;
}

.user-message {
  flex-direction: row-reverse;
}

.ai-message {
  flex-direction: row;
}

.message-avatar {
  flex-shrink: 0;
  margin: 0 12px;
}

.message-content {
  max-width: 70%;
  background-color: white;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-message .message-content {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.message-sender {
  font-weight: bold;
}

.message-time {
  font-size: 12px;
  color: #8c8c8c;
}

.message-body {
  line-height: 1.6;
}

.message-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

/* 欢迎区域样式 */
.welcome-container {
  text-align: center;
  padding: 40px 20px;
}

.welcome-header {
  margin-bottom: 40px;
}

.welcome-title {
  font-size: 28px;
  margin-bottom: 16px;
  color: #1890ff;
}

.welcome-subtitle {
  font-size: 16px;
  color: #5b6b7b;
}

.quick-actions {
  max-width: 600px;
  margin: 0 auto;
}

.quick-actions-title {
  font-size: 18px;
  margin-bottom: 16px;
  color: #2c3e50;
}

.quick-actions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.quick-action-item {
  background-color: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  text-align: left;
}

.quick-action-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: #e6f7ff;
}

.quick-action-item .el-icon {
  margin-right: 8px;
  color: #1890ff;
}

/* 聊天输入框区域 */
.chat-footer {
  padding: 16px;
  border-top: 1px solid #eaecef;
  background-color: white;
}

.input-container {
  display: flex;
  align-items: flex-end;
}

.message-input {
  flex-grow: 1;
  margin-right: 12px;
  border-radius: 8px;
}

.input-actions {
  display: flex;
  flex-shrink: 0;
}

.footer-tips {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #8c8c8c;
}

/* 输入框样式覆盖 */
:deep(.el-textarea__inner) {
  border-radius: 8px;
  padding: 12px;
  resize: none;
  min-height: 20px;
  line-height: 1.5;
}

/* Markdown内容样式 */
.markdown-content {
  line-height: 1.6;
}

.markdown-content :deep(h1) {
  font-size: 1.8em;
  margin: 0.5em 0;
  color: #1890ff;
}

.markdown-content :deep(h2) {
  font-size: 1.5em;
  margin: 0.5em 0;
  color: #1890ff;
}

.markdown-content :deep(h3) {
  font-size: 1.2em;
  margin: 0.5em 0;
  color: #1890ff;
}

.markdown-content :deep(code) {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
  background-color: #f6f8fa;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  color: #d63384;
}

.markdown-content :deep(pre) {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 8px 0;
}

.markdown-content :deep(pre code) {
  background-color: transparent;
  padding: 0;
  color: #333;
  display: block;
  white-space: pre-wrap;
}

.markdown-content :deep(a) {
  color: #1890ff;
  text-decoration: none;
}

.markdown-content :deep(a:hover) {
  text-decoration: underline;
}

.markdown-content :deep(strong) {
  font-weight: 600;
}

.markdown-content :deep(em) {
  font-style: italic;
}

.markdown-content :deep(li) {
  margin: 0.3em 0;
  margin-left: 1.5em;
  list-style-type: disc;
}

/* 输入加载状态 */
.typing-indicator {
  display: flex;
  align-items: center;
}

.typing-indicator span {
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #8c8c8c;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.6;
}

.typing-indicator span:nth-child(1) {
  animation: bounce 1.2s infinite 0.1s;
}

.typing-indicator span:nth-child(2) {
  animation: bounce 1.2s infinite 0.3s;
}

.typing-indicator span:nth-child(3) {
  animation: bounce 1.2s infinite 0.5s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}
</style> 